<!-- @format -->

<template>
	<div class="operational-count m-t-2">
		<home-title :title="`运营数据(${homeTimeText})`">
			<tab-time />
		</home-title>
		<div class="flex justify-around content">
			<div style="display:flex;align-items:center;flex-direction:column">
				<a-tooltip content="客户即将到达/已到达园区的到货预报统计（按选择时间范围统计）" background-color="#168cff">
					<p class="m-b-10 flex align_center">
						<!-- <p style="margin-right:4px">到货预报</p> -->
						<p style="margin-right:4px">到货量</p>
						<icon-question-circle size="18" :style="{color:'#168cff'}" />
					</p>
				</a-tooltip>
				<p>
					<span> {{ data ? data.daohuoyubao : 0 }} </span>
					吨
				</p>
			</div>
			<div style="display:flex;align-items:center;flex-direction:column">
				<a-tooltip content="客户提货计划单重量（按选择时间范围统计）" background-color="#168cff">
					<p class="m-b-10 flex align_center">
						<p style="margin-right:4px">提货单</p>
						<icon-question-circle size="18" :style="{color:'#168cff'}" />
					</p>
				</a-tooltip>
				<p>
					<span> {{ data ? data.tihuodan : 0 }} </span>
					吨
				</p>
			</div>
			<div style="display:flex;align-items:center;flex-direction:column">
				<a-tooltip content="客户实际提货重量，包含办理提货和仓储提货（按选择时间范围统计）" background-color="#168cff">
					<p class="m-b-10 flex align_center">
						<p style="margin-right:4px">实际提货</p>
						<icon-question-circle size="18" :style="{color:'#168cff'}" />
					</p>
				</a-tooltip>
				<p>
					<span> {{ data ? data.shijitihuo : 0 }} </span>
					吨
				</p>
			</div>
			<div style="display:flex;align-items:center;flex-direction:column">
				<a-tooltip content="客户发运量" background-color="#168cff">
					<p class="m-b-10 flex align_center">
						<p style="margin-right:4px">发运</p>
						<icon-question-circle size="18" :style="{color:'#168cff'}" />
					</p>
				</a-tooltip>
				<p>
					<span> {{ data ? data.zch_zl : 0 }} </span>
					吨
				</p>
			</div>
			<!-- <div style="display:flex;align-items:center;flex-direction:column">
				<a-tooltip content="仓储业务提走的货物重量（按选择时间范围统计）" background-color="#168cff">
					<p class="m-b-10 flex align_center">
						<p style="margin-right:4px">出库重量</p>
						<icon-question-circle size="18" :style="{color:'#168cff'}" />
					</p>
				</a-tooltip>
				<p>
					<span> {{ data ? data.chuku : 0 }} </span>
					吨
				</p>
			</div>
			<div style="display:flex;align-items:center;flex-direction:column">
				<a-tooltip content="仓储业务存入库区的货物重量（按选择时间范围统计）" background-color="#168cff">
					<p class="m-b-10 flex align_center">
						<p style="margin-right:4px">入库重量</p>
						<icon-question-circle size="18" :style="{color:'#168cff'}" />
					</p>
				</a-tooltip>
				<p>
					<span> {{ data ? data.ruku : 0 }} </span>
					吨
				</p>
			</div> -->
		</div>
	</div>
</template>

<script setup>
	import { inject, defineProps } from "vue";
	import HomeTitle from "./components/home-title.vue";
	import TabTime from "./components/tag_time.vue";
	const homeTimeText = inject("homeTimeText");
	defineProps(["data"]);
</script>

<style lang="less" scoped>
	.operational-count {
		height: 158px;
		background: linear-gradient(0deg, #ffffff, #ffffff),
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.76) 0%,
				rgba(222, 239, 255, 0.76) 100%
			);
		border-radius: 9px;

		.content {
			height: 116px;
			padding: 32px 40px;
			box-sizing: border-box;
			gap: 56px;

			> div {
				min-width: 52px;
				flex: 1 1 auto;

				p {
					font-size: 18px;
					color: #415b73;
					span {
						font-size: 24px;
						font-weight: 700;
						color: #00a0e9;
					}
				}
			}
		}

		.m-b-10 {
			margin-bottom: 10px;
		}
		.align_center{
			align-items: center;
		}
	}
</style>
